<template>
  <div class="content">
    <div class="mini_game_wrapper">
      <div class="mini_game_circle">
        <div
          v-for="(item, index) in props.items"
          :key="index"
          class="mini_game_item"
          :style="getItemStyle(index)"
          @click="handleClick(item)"
        >
          <img :src="item.icon" alt="game_icon" class="game_icon" />
          <span class="game_label">{{ item.label }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { useI18n } from "vue-i18n";
// import { ref  } from "vue";
// import {useRoute, useRouter} from "vue-router";

// const route = useRoute();
// const router = useRouter();
// const { t } = useI18n();

const emit = defineEmits(['game-click']);

const props: any =  defineProps({
  items: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const getItemStyle = (index: number) => {
  const angle = (360 / props.items.length) * index;
  const radius = 120;
  const x = radius * Math.cos((angle * Math.PI) / 180);
  const y = radius * Math.sin((angle * Math.PI) / 180);
  return {
    transform: `translate(${x}px, ${y}px)`,
  };
};

// 图标点击事件
const handleClick = (item: any) => {
  emit("game-click", item);
}

</script>

<style scoped lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .mini_game_wrapper {
    position: relative;
    width: 316px;
    height: 316px;
    margin: auto;

    .mini_game_circle {
      position: relative;
      width: 316px;
      height: 316px;
      border-radius: 50%;
      border: 1px solid rgba(118, 155, 255, 0.35);
      background: linear-gradient(180deg, rgba(43, 135, 255, 0.21) 0%, rgba(28, 47, 112, 0.21) 100%);
      box-shadow: 9px 9px 24.6px 0px rgba(78, 122, 255, 0.48) inset;
      background: url(/imgs/club/mini_bg.png) no-repeat;
      background-size: 70px 70px;
      background-position: center;

      .mini_game_item {
        position: absolute; /* 让每个图标可以自由放置 */
        top: 42%;
        left: 44%;
        transform-origin: center; /* 变换的基点设置为元素的中心 */

        .game_icon {
          width: 40px;
          height: 40px;
          display: block;
        }

        .game_label {
          color: white;
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
